<template>
    <!-- 科室导航弹框 -->
    <div class="depDialog">
        <el-dialog
            :close-on-click-modal="false"
            v-model="isShow.value"
            :show-close="false"
            @close="emit('handelDialogClose')">
            <i class="close iconfont icon-guanbi" @click="emit('closeDialog')"></i>
            <div class="content">
            <div v-if='depListShow' style="height:100%">
                <div class="title">科室导航</div>
                <div class="dep-select">
                  <el-select v-model="campusVal" placeholder="院本部" :teleported="false" @change="changeCampus">
                    <el-option
                        v-for="(value, key) in departmentDialogData.depInfo.campus"
                        :key="key"
                        :label="value.name"
                        :value="key"
                    />
                  </el-select>
                </div>
                <div class="nav-content">
                  <div class="nav">
                    <div class="type" 
                        v-for="(value, key) in departmentDialogData.depInfo.depClass" 
                        :key="key" 
                        @click="onClickDepNav(key)" 
                        :class="{active:key==isChoose}">
                        {{value.val}}
                    </div>
                  </div>
                </div>
                <el-scrollbar height="327px">
                  <div class="dep-content">
                    <ul>
                        <li v-for="(value, key) in departmentDialogData.depInfo.depList" :key="key">
                            <div class="dep-tit" @click="toDepDetail(key,value.catname)">{{value.catname}}</div>
                        </li>
                    </ul>
                  </div>
                </el-scrollbar>
                
            </div>
            <div class="dep-detail" v-else>
                <div class="title">科室导航</div>
                <i class="fanhui iconfont icon-xiangxiajiantou"  @click="depListShow = true"></i>
                <div class="top">
                    <div class="back" @click="depListShow = true">返回</div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item>{{depName}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="dep-container">
                    <div class="tit">{{depName}}</div>
                    <div class="dep-describ" v-html="departmentDialogData.depInfo.depDetail"></div>
                    <div class="more dep-more" @click="toDepIntro">查看详情></div>
                    <div style="clear:both"></div>
                    <div class="doc-tit">科室医生</div>
                    <!-- 医生轮播图 -->
                    <!-- <div>
                      <swiper :autoplay="swiper_options.autoplay"
                      :loop="swiper_options.loop"
                      :speed="swiper_options.speed"
                      :pagination="swiper_options.pagination"
                      :navigation="swiper_options.navigation"
                      :spaceBetween="swiper_options.spaceBetween"
                      :centeredSlides="swiper_options.centeredSlides"
                      :slidesPerView="swiper_options.slidesPerView"
                      class="swiper">
                        <swiper-slide v-for="item in departmentDialogData.depInfo.docList">
                          <span class="doc-name">{{ item.title }}</span>
                          <span class="doc-position">{{item.doc_position}}</span>
                        </swiper-slide>
                      </swiper>
                    </div> -->
                    <div v-if="departmentDialogData.docSwiperList.length!=0" class="doc-swiper">
                      <el-carousel
                          arrow="always" 
                          :loop="true"
                          :autoplay="false"
                          indicator-position="outside"
                      >
                          <el-carousel-item
                          v-for="(item, index) in departmentDialogData.docSwiperList"
                          :key="index"
                          >
                          <div class="scene_view_page">
                              <div
                              v-for="viewItem in item"
                              :key="viewItem.id"
                              class="scene_view_item"
                              >
                              <el-image
                                  class="scene_image"
                                  :src="viewItem.thumb"
                                  fit="cover"
                              />
                              <span class="doc-name">{{ viewItem.title }}</span>
                              <span class="doc-position">{{viewItem.doc_position}}</span>
                              </div>
                          </div>
                          </el-carousel-item>
                      </el-carousel>
                    </div>
                    <div v-if="departmentDialogData.docSwiperList.length!=0" class="doc-mobile-swiper">
                        <el-carousel
                            arrow="never" 
                            :loop="true"
                            :autoplay="false"
                            indicator-position="outside"
                        >
                            <el-carousel-item
                            v-for="(item, index) in departmentDialogData.mdocSwiperList"
                            :key="index"
                            >
                            <div class="scene_view_page">
                                <div
                                v-for="viewItem in item"
                                :key="viewItem.id"
                                class="scene_view_item"
                                >
                                <el-image
                                    class="scene_image"
                                    :src="viewItem.thumb"
                                    fit="cover"
                                />
                                <span class="doc-name">{{ viewItem.title }}</span>
                                <span class="doc-position">{{viewItem.doc_position}}</span>
                                </div>
                            </div>
                            </el-carousel-item>
                        </el-carousel>
                      </div>
                    <div class="nodata" v-else>
                    暂无数据
                    </div>
                    <div class="more doc-more" @click="toDocIntro">访问科室子站了解更多详情></div>
                </div>
            </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
/* eslint-disable */

import {ref, reactive,toRefs, defineProps, defineEmits } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import {
  ElCarousel,
  ElCarouselItem,
  ElImage,
  ElDialog,
  ElBreadcrumb
} from 'element-plus'

import { getUrlQueryData } from '@/utils/tools'

import {
  getBranch,
  getBranchInfo } from '@/api/hosInfo'

// import SwiperCore, { Autoplay, Pagination, EffectCoverflow,Navigation } from "swiper";
// import { Swiper, SwiperSlide } from "swiper/vue";
// import "swiper/swiper-bundle.css";
// SwiperCore.use([Autoplay, Pagination, EffectCoverflow,Navigation]);

// let swiper_options = reactive({
//       autoplay: {
//         disableOnInteraction: false, // 鼠标滑动后继续自动播放
//         delay: 4000, //4秒切换一次
//       },
//       speed: 500, //切换过渡速度
//       loop: true,
//       slidesPerView: "auto", //解决最后一张切换到第一张中间的空白
//       centeredSlides: true, //设置slide居中
//       spaceBetween: 20,
//       // coverflowEffect: {
//       //   // rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
//       //   stretch: 50, //每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。
//       //   depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
//       //   modifier: 1, //depth和rotate和stretch的倍率，相当于            depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
//       //   // slideShadows: false, //开启slide阴影。默认 true。
//       // },
//       navigation: {
//         nextElRef: ".swiper-button-next",
//         prevElRef: ".swiper-button-prev",
//       },
//       pagination: {
//         clickable: true,
//       },
//     });
// let haveArrow = ref('');
// window.addEventListener('resize', function() {
//     let width = document.documentElement.clientWidth;
//     if(width< 1024) {
//       haveArrow.value = "never";
//     }else {
//       haveArrow.value = "always";
//     }
  
// })
// window.onload = () => {
//   let width = document.documentElement.clientWidth;
//     if(width< 1024) {
//       haveArrow.value = "never";
//     }else {
//       haveArrow.value = "always";
//     }
// }


const props = defineProps({
    departmentDialogShow:Boolean,
    cmpParams:{
      type: Object,
    }
})
const isShow = reactive({
    get value(){ 
        return props.departmentDialogShow;
    },
    set value(v){
        return ;
    }
})
const { departmentDialogShow, cmpParams } = toRefs(props)
const emit = defineEmits(["closeDialog","handelDialogClose"])
//科室导航
const depListShow = ref(true)
const isChoose = ref('')
const departmentDialogData = reactive({
  depInfo:{
    campus:{},
    depClass:{},
    allDep:{},
    depList:{},
    depDetail:'',
    depUrl:'',
    docList:[],
    docUrl:''
  },
  docSwiperList:[],
  mdocSwiperList:[],
  camKey:''
})
const campusVal = ref('');
import {getBranchJSON} from '@/views/content/VR/dialogCmp/api.js'
//获取科室信息
const getDepartment = async () => {
  // const res = await getBranch(getUrlQueryData())
  const res = getBranchJSON
  if (res.status != 200) {
    return
  }
  departmentDialogData.depInfo.campus = res.data.department_list;
  let depkeys = Object.keys(res.data.department_classdef)
  isChoose.value = depkeys[0];
  departmentDialogData.depInfo.depClass = res.data.department_classdef;
  campusVal.value = departmentDialogData.camKey = Object.keys(res.data.department_list)[0];
  let depObj = res.data.department_list[departmentDialogData.camKey].child;
  departmentDialogData.depInfo.allDep = res.data.department_list[departmentDialogData.camKey].child;
  departmentDialogData.depInfo.depList = Object.values(depObj)[0].childids;
  if(cmpParams.value){
    toDepDetail(cmpParams.value.catid)
  }
}
//选择院区
const changeCampus = val => {
  departmentDialogData.camKey = val
  console.log(val,doctorDialogData.docInfo)
}

//选择科室
const onClickDepNav = depId => {
  isChoose.value = depId;
  for(let key in departmentDialogData.depInfo.allDep) {
    if(key == depId) {
      departmentDialogData.depInfo.depList = departmentDialogData.depInfo.allDep[key].childids;
    }
  }
}
import {getBranchInfoJSON} from '@/views/content/VR/dialogCmp/api.js'
//获取科室详情
const getDepDetail = async (params) => {
  // const res = await getBranchInfo(params)
  const res = getBranchInfoJSON

  if (res.status != 200) {
    return
  }
  departmentDialogData.depInfo.depDetail = res.data.depart.describe;
  departmentDialogData.depInfo.depUrl = res.data.depart.url;
  departmentDialogData.depInfo.docList = res.data.doc;
  departmentDialogData.depInfo.docUrl = res.data.url;

  const docListLength = departmentDialogData.depInfo.docList.length
  departmentDialogData.docSwiperList = []
  for (let i = 0; i < docListLength; i += 5) {
    departmentDialogData.docSwiperList.push(departmentDialogData.depInfo.docList.slice(i, i + 5))
  }
  departmentDialogData.mdocSwiperList = []
  for (let i = 0; i < docListLength; i += 6) {
    departmentDialogData.mdocSwiperList.push(departmentDialogData.depInfo.docList.slice(i, i + 6))
  }
}
const depName = ref('')
const toDepDetail = (catid,dep) => {
  depName.value = dep;
  depListShow.value = false;
  const params = {
    url:getUrlQueryData(),
    catid
  }
  getDepDetail(params)
}
//查看科室介绍
const toDepIntro = () => {
  window.open(departmentDialogData.depInfo.depUrl, '_blank')
}
//查看医生详情
const toDocIntro = () => {
  window.open(departmentDialogData.depInfo.docUrl, '_blank')
}
//获取科室数据
getDepartment()
</script>

<style scoped>

/* .swiper {
  height: 188px;
} */

/* 科室导航 */
.depDialog >>> .el-dialog {
  width: 960px;
  height: 680px;
}
.depDialog >>> .el-dialog__header {
    display: none;
}
.depDialog >>> .el-dialog__body {
  padding: 40px 0 0 !important;
}
.depDialog .content {
  height: 100%;
}
.depDialog .content .dep-content  {
  padding:  0 80px 40px;
  /* min-height: 300px;
  margin-top: 23px; */
}
.depDialog .content .dep-content ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: -20px;
}
.depDialog .content .dep-content li {
  position: relative;
  width: 185px;
  height: 42px;
  font-size: 14px;
  line-height: 21px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  padding-left: 12px;
  box-sizing: border-box;
  margin-right: 20px;
  margin-bottom: 12px;
  cursor: default
}
.depDialog .content .dep-content li:before {
  content:'';
  display: block;
  width:9px;
  height: 9px;
  border-radius: 50%;
  background-color: #1F73F2;
  position: absolute;
  top: 6px;
  left: 0;
}
.depDialog .content .dep-content li .dep-tit:hover {
  color: #1F73F2;
}
.depDialog .content .dep-content li .dep-tit {
  cursor: pointer;
}
/* 科室详情 */
.content .dep-detail .title, 
.fanhui{
  display: none;
}
.dep-container {
  padding:  0 80px 40px;
  position: relative;
  cursor: default;
}
.dep-container .tit {
  font-size: 20px;
  line-height: 20px;
  color: #333333;
}
.dep-container .dep-describ {
  margin: 24px 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.dep-container .more {
  color: #1F73F2;
  font-size: 13px;
  line-height: 13px;
  cursor: pointer;
  float: right
}
.dep-container .doc-tit {
  font-size: 16px;
  line-height: 16px;
  color: #333333;
  margin: 15px 0 24px;
}

.doc-mobile-swiper {
  display: none;
}
.doc-swiper {
    width: 100%;
}

.doc-swiper >>> .el-carousel__container {
  height: 188px;
  width: 100%;
}
.doc-swiper >>> .el-carousel__button {
  width: 30px;
  height: 4px;
}
.doc-swiper >>> .el-carousel__indicator.is-active button {
  background-color: #FCA203;
}

.doc-swiper .scene_view_page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.doc-swiper .scene_view_item {
  background-color: #fff;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  margin-right: 30px;
}

.doc-swiper .scene_view_item span {
  margin-top: 10px;
  font-size: 14px;
}
.doc-swiper .scene_view_item span.doc-name {
  color: #333;
}
.doc-swiper .scene_view_item span.doc-position {
  color: #AAAAAA;
}
.doc-swiper .scene_view_item:last-child {
  margin-right: 0;
}

.doc-swiper .scene_view_item .scene_image {
  width: 100px;
  height: 140px;
}
.doc-swiper >>> .el-carousel__arrow{
  width: 20px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.2);
}

.close {
  font-size: 24px;
  color: #717378;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.close:hover {
  color: #1F73F2;
}
 .content .title {
  font-size: 24px;
  color: #000;
  margin-bottom: 36px;
  /* text-align: center; */
  padding-left: 80px;
  display: inline-block;
  cursor: default;
}
.nav-content {
  margin-bottom: 34px;
}
 .content .nav {
  display: flex;
  margin: auto;
  width: 620px;
  /* margin-bottom: 8px; */
}
 .content .nav .type {
  flex-shrink: 0;
  width: 140px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #000000;
  background-color: #F2F2F2;
  border-radius: 5px;
  cursor: pointer;
}
 .content .nav .type + .type {
  margin-left: 20px;
}
 .content .nav .type.active {
  background-color: #1F73F2;
  color: #fff;
}
/* 面包屑 */
.content .top {
  display: flex;
  align-items: center;
  padding: 0 80px;
  margin-bottom: 40px;
  font-size: 14px;
}
.content .top >>> .el-breadcrumb {
  margin-top: 1px;
}
.content .top .el-breadcrumb__inner {
  color: #AAA;
}
.content .top .back {
  position: relative;
  margin-right: 20px;
  color: #1F73F2;
  cursor: pointer;
}
.content .top .back:after {
  content: '';
  display: block;
  height: 16px;
  width: 1px;
  background-color: rgba(170, 170, 170, 0.5);
  position: absolute;
  top: 2px;
  right: -0.625rem;
}
.content >>> .el-scrollbar__bar.is-vertical {
  width: 8px;
  right: 20px;
  background-color: rgba(170, 170, 170, 0.5)
}
.content >>> .el-scrollbar__bar.is-horizontal {
  display: none;
}
.content >>> .el-scrollbar__bar.is-vertical>div {
  background-color: #1F73F2;
  opacity: 1;
}
.dep-select {
  display: inline-block;
}
 .content >>> .el-select {
  margin-left: 20px;
}
 .content >>> .el-input {
  /* width: 13.5vw; */
  height: 40px;
  border-radius: 50px;
}
 .content >>> .el-select .el-input {
  /* width: 160px; */
}
 .content >>> .el-input__wrapper {
  border-radius: 50px;
  box-shadow: none;
  background-color: #F2F2F2;
  
}
 .content  >>> .el-input__wrapper .el-input__inner {
  color: #333333;
}
 .content >>> .search .el-input__wrapper {
  border: 1px solid rgba(170, 170, 170, 0.5);
  border-radius: 50px 0 0 50px;
  border-right: none;
  background-color: #fff;
}
 .content >>> .el-input__wrapper:hover {
  box-shadow: none;
}
@media screen and (max-width: 1360px) and  (min-width: 1024px) {
    .depDialog >>> .el-dialog {
        transform: scale(0.8);
        transition:transform 0.3s linear;
    }
}
@media screen and (max-width: 1024px) {
  .depDialog >>> .el-overlay {
      z-index: 10001 !important;
  }
  .depDialog >>> .el-dialog {
        /* width: 360px; */
    width: 95%;
    height: 95%;
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 4px 4px 0 0;
    min-width: 360px;
    }
    .depDialog >>> .el-dialog__body {
        padding: 20px 0 0 !important;
        height: 100%;
        box-sizing: border-box;
    }
    .depDialog .close {
        font-size: 16px;
    }
    .content .title {
        font-size: 18px;
        margin-bottom: 30px;
        text-align: center;
        display: block;
        padding: 0;
    }
    .dep-select {
      padding: 0 30px;
      margin-bottom: 20px;
      display: block;
    }
    .content .el-select {
      margin-left: 0;
      width: 100%;
    }
    .content >>> .el-input {
      height: 32px;
    }
    .content .nav .type {
      width: 86px;
      height: 22px;
      line-height: 22px;
    }
    .depDialog .content .dep-content {
      padding: 0 30px
    }
    .nav-content {
      padding: 0 30px;
      margin-bottom: 20px;
    }
    .content .nav {
      width: 100%;
      overflow-y: hidden;
      overflow-x: auto;
      padding-bottom: 10px;
    }
    .depDialog .content >>> .el-scrollbar {
        height: calc(100% - 200px) !important;
    }
    .depDialog .content >>> .el-scrollbar__wrap {
        height: 100% !important;
    }
    .depDialog .content .dep-content li {
      width: 143px;
    }
    .content  .dep-detail .title, .fanhui{
      display: block;
    }
    .content .top .back {
      display: none;
    }
    .fanhui {
      position: absolute;
      left: 30px;
      top: 25px;
      font-weight: bold;
      font-size: 1rem;
      color: #1F73F2;
      transform: rotate(90deg);
      cursor: pointer;
    }
    .content .top {
      padding: 0 30px;
      margin-bottom: 22px;
    }
    .dep-container {
      padding: 0 30px;
      height: calc(100% - 91px);
    }
    .dep-container .dep-more {
      position: absolute;
      top: 0;
      right: 30px;
    }
    .dep-container .tit {
      font-size: 16px;
      line-height: 16px;
    }
    .doc-swiper {
      display: none;
    }
    .doc-mobile-swiper {
      display: block;
      height: 50%;
    }
    .doc-mobile-swiper >>> .el-carousel {
      height: 100%;
    }
    .doc-mobile-swiper >>> .el-carousel__container {
      /* height: 360px; */
      height: 89%;
      width: 100%;
    }
    .doc-mobile-swiper>>> .el-carousel__button {
      width: 30px;
      height: 4px;
    }
    .doc-mobile-swiper >>> .el-carousel__indicator.is-active button {
      background-color: #FCA203;
    }

    .doc-mobile-swiper .scene_view_page {
      display: flex;
      /* align-items: center; */
      justify-content: center;
      flex-wrap: wrap;
      height: 100%;
      margin-right: -30px;
    }

    .doc-mobile-swiper .scene_view_item {
      background-color: #fff;
      color: #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* height: 170px; */
      height: 50%;
      margin-right: 30px;
    }

    .doc-mobile-swiper.scene_view_item span {
      margin-top: 10px;
      font-size: 14px;
    }
    .doc-mobile-swiper .scene_view_item span.doc-name {
      color: #333;
    }
    .doc-mobile-swiper .scene_view_item span.doc-position {
      color: #AAAAAA;
    }
    /* .doc-mobile-swiper .scene_view_item:last-child {
      margin-right: 0;
    } */

    .doc-mobile-swiper .scene_view_item .scene_image {
      width: 80px;
      height: 112px;
    }
    .dep-detail {
      height: 100%;

    }
    .dep-container .doc-more {
      float: none;
      width: 173px;
      margin: auto;
    }
}
</style>
